<template>
  <div class="product">
    <div class="product-item flex-custom">
      <div class="label">模糊商品名称：</div>
      <div class="value">{{ good.name }}</div>
    </div>
    <div class="product-item flex-custom">
      <div class="label">网上标称商品名称：</div>
      <div class="value">
        <el-select
          v-model="onlineNameValue"
          placeholder="请选择网上标称商品名称"
          style="width: 240px"
          size="small"
          @click="hideProductToolsImmediately"
          @mouseover="showProductTools"
          @mouseleave="hideProductTools"
        >
          <el-option
            v-for="item in good.onlineNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div
        class="tools"
        v-if="productToolsVisible"
        @mouseover="showProductTools"
        @mouseleave="hideProductTools"
      >
        <div class="tool-item" @click="clearSelection">
          <div class="tool-item__icon">
            <el-icon size="12" color="white"><Unlock /></el-icon>
          </div>
          <div class="tool-item__txt">解绑商品</div>
        </div>
        <div class="tool-item" @click="showProductPic">
          <div class="tool-item__icon">
            <el-icon size="12" color="white"><Picture /></el-icon>
          </div>
          <div class="tool-item__txt">查看图片</div>
        </div>
      </div>
    </div>
    <div class="product-item flex-custom">
      <div class="time">
        <div class="label">开始时间：</div>
        <div class="value">{{ good.startTime }}</div>
      </div>
      <div class="time">
        <div class="label">结束时间：</div>
        <div class="value">{{ good.endTime }}</div>
      </div>
    </div>
    <div class="product-item">
      <div class="good-info">
        <el-timeline hide-timestamp>
          <el-timeline-item
            color="#605AE5"
            v-for="(goodDetail, index) in good.detail"
            :key="index"
          >
            <div
              class="good-detail"
              @mouseover="showKeyPointTools(index)"
              @mouseleave="hideKeyPointTools"
            >
              <div class="title primary-txt">{{ goodDetail.title }}</div>
              <div class="des">{{ goodDetail.des }}</div>
              <div class="time">
                提及时间：<span class="time-num">{{ goodDetail.time }}</span>
              </div>
              <div
                class="tools"
                v-if="
                  keyPointToolsVisible && keyPointCurMouseOverIndex === index
                "
              >
                <div class="tool-item" @click="showKeyPointEditDialog(index)">
                  <div class="tool-item__icon">
                    <el-icon size="12" color="white"><Edit /></el-icon>
                  </div>
                  <div class="tool-item__txt">编辑</div>
                </div>
                <div class="tool-item" @click="insertKeyPointToEditor(index)">
                  <div class="tool-item__icon">
                    <el-icon size="12" color="white"><CopyDocument /></el-icon>
                  </div>
                  <div class="tool-item__txt">复制</div>
                </div>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="keyPoint-dialog" v-if="keyPointEditDialogVisible">
        <div class="title">编辑（{{ curKeyPointData.title }}）</div>
        <div class="content">
          <el-input
            v-model="curKeyPointData.des"
            type="textarea"
            placeholder="Please input"
          />
        </div>
        <div class="btn-wrap">
          <div class="btn" @click="saveNewKeyPoint">保存</div>
          <div class="btn" @click="cancelEditKeyPoint">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { Unlock, Picture, Edit, CopyDocument } from '@element-plus/icons-vue'
import { ref } from 'vue'
const props = defineProps({
  good: Object
})
const emit = defineEmits(['showProductPic','insertKeyPointToEditor'])
const productToolsVisible = ref(false)
const keyPointToolsVisible = ref(false)
const keyPointEditDialogVisible = ref(false)
const curKeyPointData = ref({})
const onlineNameValue = ref('')
const keyPointCurMouseOverIndex = ref()
let timeoutHandler = null

function clearSelection() {
  onlineNameValue.value = ''
}
function showProductPic() {
  emit('showProductPic', onlineNameValue.value)
}
function showProductTools() {
  clearTimeout(timeoutHandler)
  if (onlineNameValue.value) {
    productToolsVisible.value = true
  }
}
function hideProductTools() {
  timeoutHandler = setTimeout(() => {
    productToolsVisible.value = false
  }, 2000)
}
function hideProductToolsImmediately() {
  productToolsVisible.value = false
}

function showKeyPointTools(index) {
  keyPointToolsVisible.value = true
  keyPointCurMouseOverIndex.value = index
}

function hideKeyPointTools() {
  keyPointToolsVisible.value = false
  keyPointCurMouseOverIndex.value = ''
}
function showKeyPointEditDialog(index) {
  curKeyPointData.value = props.good.detail[index]
  keyPointEditDialogVisible.value = true
  keyPointToolsVisible.value = false
}

function cancelEditKeyPoint() {
  keyPointCurMouseOverIndex.value = ''
  curKeyPointData.value = {}
  keyPointEditDialogVisible.value = false
  keyPointToolsVisible.value = false
}

function saveNewKeyPoint() {
  console.log('saveNewKeyPoint')
  cancelEditKeyPoint()
}
function insertKeyPointToEditor(index){
  let curKeyPointData = props.good.detail[index]
  emit('insertKeyPointToEditor', curKeyPointData)
}
</script>
<style lang="scss" scoped>
.flex-custom {
  display: flex;
  align-items: center;
}
.tools {
  position: absolute;
  top: calc(100% + 10px);
  right: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px;
  z-index: 1000;
  .tool-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
    border-right: 1px solid #eee;
    cursor: pointer;
    padding: 0px 10px;
    &:last-child {
      margin-right: 0px;
      border-right: none;
    }

    .tool-item__icon {
      width: 16px;
      height: 16px;
      border-radius: 20px;
      background-color: #605ae5;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tool-item__txt {
      margin-left: 5px;
    }
  }
}
.product-item {
  --el-color-primary: #605ae5;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 24px;
  align-items: center;
  position: relative;
  .label {
    color: #666;
    line-height: 24px;
  }
  .value {
    color: #333;
    font-weight: bold;
  }

  .time {
    display: flex;
    width: 50%;
    .value {
      color: #605ae5;
    }
  }
  .good-info {
    position: relative;
    overflow-x: hidden;
    height: 180px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: #ccc; // 滑块颜色
      border-radius: 5px; // 滑块圆角
    }
    .el-timeline {
      padding-left: 10px;
    }
    .good-detail {
      position: relative;
      width: 330px;
      border-radius: 15px;
      padding: 10px 20px;
      background-color: rgba(231, 231, 251, 1);
      margin-top: 10px;
      .title {
        display: inline-block;
        height: 24px;
        background: #dddcf9;
        border-radius: 6px;
      }
      .des {
        font-weight: bold;
        font-size: 12px;
        color: #1f2036;
        line-height: 18px;
        margin-top: 8px;
      }
      .tools {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      .time {
        margin-top: 8px;
        color: #999;
        .time-num {
          color: #605ae5;
        }
      }
    }
  }
}
.keyPoint-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(25, 22, 99, 0.15);
  border-radius: 15px;
  padding: 10px 20px;
  box-sizing: border-box;
  .title {
    font-weight: 400;
    font-size: 12px;
    color: #333333;
  }
  .content {
    width: 360px;
    height: 55px;
    border-radius: 5px;
    margin-top: 10px;
    .el-input {
      width: 100%;
      height: 100%;
      textarea {
        width: 100%;
        height: 100%;
        resize: none !important;
        border: none;
        overflow-y:auto &::-webkit-scrollbar {
          width: 4px;
          height: 4px;
        }
        &::-webkit-scrollbar-thumb {
          background: #ccc; // 滑块颜色
          border-radius: 5px; // 滑块圆角
        }
      }
    }
  }
  .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    .btn {
      width: 54px;
      height: 22px;
      line-height: 22px;
      background: #605ae5;
      border-radius: 11px;
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
